<template>
  <section>
    <el-card class="bodyLeft" :style="{width:hide ? 'max-content' : '0px'}">
     <el-button style="display: block;margin-top:5px;margin-left:5px" @click="$router.push(i.link)" v-for="i in data" :key="i.link"> {{ i.name }}  </el-button>
    </el-card>
    <el-card  class="bodyRight" :style="{'margin-left': hide ? '10px' : '0px'}"> 
      <router-view></router-view>
    </el-card>
    <div class="btn">
      <el-button type="primary" class="hideBtn"  @click="add">{{hide ? '隐藏' : '打开'}}<i :class="hide? 'el-icon-arrow-left' : 'el-icon-arrow-right'" class="el-icon--right"></i></el-button>
    </div>
  </section>
</template>
<script >
import route from '../router'
export  default {
  name:'home',
  data(){
    return {
      hide:true,
      data:[]
    }
  },
  created(){
    this.data = route.options.routes[0].children.map(item=>({link:item.path, name:item.meta.name}))
  },
  mounted(){
    document.querySelector('.bodyRight').style.width = `calc(100% - 10px - ${document.querySelector('.bodyLeft').offsetWidth}px)`
  },
  methods:{
    add(){
      this.hide = !this.hide
      this.$nextTick(()=>{
        document.querySelector('.bodyRight').style.width = `calc(100% - ${this.hide ? '10px' : '0px'} - ${document.querySelector('.bodyLeft').offsetWidth}px)`
      })
    }
  }

}

</script>

<style scoped lang="less">

section{
  height: 100%;
  width: 100%;
  .bodyLeft,.bodyRight{
    overflow-y: auto;
    display: inline-block;
    height: 100%;
  }
}
.bodyLeft{
  position: relative;
}
.bodyLeftHideBtn {
  position: absolute;
  right: 0;
  float: right;
}
.btn /deep/ .el-button{
  padding: 12px 4px 12px 13px;

}
/deep/ .el-card__body{
  padding: 0;
}
.hideBtn{
  position: absolute;
  top: 50%;
  left: -48px;
  z-index: 1000;
  transition: all .3s;
}
.hideBtn:hover{
  left: -10px;

}
/deep/  .el-button--primary{
  margin: 6px;
}
/deep/ .el-card__body{
  height: 100%;
}
</style>
